<!-- 危固废1 -->
<template>
    <div>
        <div id="mainLarge1" style="width: 100%;height:8.5rem;position: absolute;left: 0;right: 0;top: 0px;margin: auto;">
        </div>
    </div>
</template>
  
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import { RequestStatisticGetTopMessage } from "@/api/path/index.js";

// 基于准备好的dom，初始化echarts实例
// 绘制图表
onMounted(() => {
    RequestStatisticGetTopMessage().then((res: any) => {

        var chartDom = document.getElementById('mainLarge1');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            grid: {
                left: '0%',
                right: '0%',
                bottom: '0%',
                containLabel: true,
            },
            title: {
                text: '今日收车数',
                top: '95px',
                left: 'center',
                textStyle: {
                    fontSize: '12',
                    fontWeight: '200',
                    color: '#fff'
                }
            },
            series: [
                {
                    type: 'gauge',
                    startAngle: 180,
                    endAngle: 0,
                    min: 0,
                    max: 240,
                    splitNumber: 12,
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: 'rgba(16, 210, 233, 1)'
                            },
                            {
                                offset: 1,
                                color: 'rgba(4, 105, 185, 1)'
                            }
                        ]),
                        shadowColor: 'rgba(0,138,255,0.45)',
                        shadowBlur: 10,
                        shadowOffsetX: 2,
                        shadowOffsetY: 2
                    },
                    progress: {
                        show: true,
                        roundCap: true,
                        width: 4
                    },
                    pointer: {
                        icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
                        length: '75%',
                        width: 5,
                        color: '#2c3852',
                        offsetCenter: [0, '1%']
                    },
                    axisLine: {
                        roundCap: true,
                        lineStyle: {
                            width: 4
                        }
                    },
                    axisTick: {
                        splitNumber: 2,
                        lineStyle: {
                            width: 1,
                            color: '#fff'
                        }
                    },
                    splitLine: {
                        length: 5,
                        lineStyle: {
                            width: 1,
                            color: '#2c3852'
                        }
                    },
                    axisLabel: {
                        distance: 2,
                        color: '#2c3852',
                        fontSize: 0
                    },
                    detail: {
                        textStyle: {
                            fontWeight: 'normal',
                            fontSize: 15,
                            color: '#FFFFFF',
                        },
                        valueAnimation: true,
                    },
                    data: [
                        {
                            value: res.resultObj.本日收车,
                        },
                    ],

                }
            ]
        };
        option && myChart.setOption(option);
    })
})
</script>
<style lang="scss" scoped></style>